<template>
    <div>
        <el-drawer v-model="isShow" title="添加车辆信息" :direction="direction" modal show-close with-header size="40%">
            <!-- 头部 -->
            <template #header>
                <h4>添加车辆信息</h4>
            </template>

            <!-- 身体 -->
            <template #default>
                <el-row>
                    <el-form :model="formData" ref="form" :rules="formRules" label-width="80px" :inline="true">
                        <el-col :span="12">
                            <el-form-item label="所属小区" prop="community_code">
                                <el-select placeholder="请选择" clearable filterable>
                                    <el-option>
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="所属房产" prop="building_code">
                                <el-select placeholder="请选择" clearable filterable>
                                    <el-option>
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="车辆名称" prop="name">
                                <el-input placeholder="请输入"></el-input>
                            </el-form-item>

                            <el-form-item label="车辆颜色" prop="color">
                                <el-input placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="所属栋数" prop="house_code">
                                <el-select placeholder="请选择" clearable filterable>
                                    <el-option>
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="所属成员" prop="member_id">
                                <el-select placeholder="请选择" clearable filterable>
                                    <el-option>
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="车辆牌照" prop="license_plate">
                                <el-input placeholder="请输入"></el-input>
                            </el-form-item>

                            <el-form-item label="备注" prop="">
                                <el-input placeholder="请输入"></el-input>
                            </el-form-item>

                        </el-col>

                    </el-form>
                </el-row>
            </template>

            <!-- 底部 -->
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="isShow = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </div>
            </template>

        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { addCarInfoApi } from '@/api/vehicle.js'

// ==================================

// 抽屉控制变量
const isShow = ref(false)


// ====================================

// 表单数据
const formData = {
    building_code: "",
    color: "",
    community_code: "",
    house_code: "",
    license_plate: "",
    member_id: null,
    name: "",
    photo: "",
    remark: ""
}


// 表单校验规则
const formRules = {
    community_code: [{ required: true, message: '请选择', trigger: 'change' }],
    building_code: [{ required: true, message: '请选择', trigger: 'change' }],
    house_code: [{ required: true, message: '请选择', trigger: 'change' }],
    member_id: [{ required: true, message: '请选择', trigger: 'change' }],
    color: [{ required: true, message: '请输入', trigger: 'blur' }],
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    license_plate: [{ required: true, message: '请输入', trigger: 'blur' }],
}

// 添加提交事件
// const onSubmit = async () => {
//     // console.log(1111);
//     await addCarInfoApi(formData)


// }
defineExpose({
    isShow
})
</script>

<style lang="scss" scoped>
</style>
